<template>
	<view class="page">
		<view class="box">
			<u-form :model="editForm" labelWidth="auto" ref="uForm">
				<u-form-item label="客户序号" borderBottom>
					<u-input v-model="editForm.id" border="none" placeholder="-" :disabled="true" disabledColor="#fff"
						input-align="right" font-size="28rpx" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="企业名称" borderBottom>
					<view class=""
						style="text-align: right;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 480rpx;margin-left:40rpx">
						{{editForm.name}}
					</view>
				</u-form-item>
				<u-form-item label="交易简称" borderBottom>
					<u-input v-model="editForm.transaction_name" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="交易代码" borderBottom>
					<u-input v-model="editForm.transaction_code" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="退市情况" borderBottom>
					<view class="" style="text-align: right;">
						{{editForm.delisting_situation?editForm.delisting_situation+'退市':'-'}}
					</view>
				</u-form-item>
				<u-form-item label="入市时间" borderBottom>
					<u-input v-model="editForm.entry_time" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="是否需求侧响应用户" borderBottom>
					<view class="" style="text-align: right;">
						{{editForm.is_reply == 1?'是':'否'}}
					</view>
				</u-form-item>
				<u-form-item label="实际联系人" borderBottom>
					<u-input v-model="editForm.contacts" border="none" placeholder="-" disabledColor="#fff"
						:disabled="true" input-align="right" font-size="28rpx" :placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="联系电话" borderBottom>
					<u-input v-model="editForm.phone" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="用电类型" borderBottom>
					<view class="" style="text-align: right;">
						{{editForm.electricity_type == 1?'居民用电':'商业用电'}}
					</view>
				</u-form-item>
				<u-form-item label="接入地" borderBottom>
					<view class=""
						style="text-align: right;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;width: 530rpx;margin-left:40rpx">
						{{editForm.city}}
					</view>
				</u-form-item>
				<u-form-item label="投产时间" borderBottom>
					<u-input v-model="editForm.production_time" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="电压等级" borderBottom>
					<u-input v-model="editForm.voltage" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="变压器报装容器" borderBottom>
					<u-input v-model="editForm.transformer" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />

				</u-form-item>
				<u-form-item label="地级市供电单位" borderBottom>
					<u-input v-model="editForm.city_supply" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
				<u-form-item label="区县级供电单位" borderBottom>
					<u-input v-model="editForm.county_supply" border="none" placeholder="-" :disabled="true"
						disabledColor="#fff" input-align="right" font-size="28rpx"
						:placeholder-style="placeholderStyle" />
				</u-form-item>
			</u-form>
			<view class="" style="width: 100%;">
				<But @tap.stop="handleSubmit" text="申请报价" :radius="20" v-if="editForm.status==1"></But>
			</view>
		</view>
		<view>
			<u-popup mode="bottom" :show="showPopup" @close="showPopup=false">
				<view class="popup-content">
					<view class="porup-header" style="padding: 20upx 10upx 0;">
						<view style="flex: 3;">
						</view>
						<view style="flex: 1;">
							<u-button text="计算总量" @click="countTotal" size="small"></u-button>
						</view>
					</view>
					<view class="porup-header" style="padding: 0upx 10upx;">
							<u--textarea placeholder="填写报价备注" border prefixIcon="edit-pen" autoHeight maxlength='-1'
								prefixIconStyle="font-size: 22px;color: #909399" v-model="remarks" ></u--textarea>
							<!-- <u--input placeholder="填写报价备注" border prefixIcon="edit-pen" type ="textarea"
								prefixIconStyle="font-size: 22px;color: #909399" v-model="remarks"></u--input> -->
	
						<!-- <view style="flex: 1;">
							<u-button text="计算总量" @click="countTotal" size="small"></u-button>
						</view> -->
					</view>

					<uni-table ref="table" border stripe emptyText="暂无数据">
						<uni-tr>
							<uni-th width="100" align="center">年份/月份(电量:MWh)</uni-th>
							<uni-th width="110" align="center">1月</uni-th>
							<uni-th width="110" align="center">2月</uni-th>
							<uni-th width="110" align="center">3月</uni-th>
							<uni-th width="110" align="center">4月</uni-th>
							<uni-th width="110" align="center">5月</uni-th>
							<uni-th width="110" align="center">6月</uni-th>
							<uni-th width="110" align="center">7月</uni-th>
							<uni-th width="110" align="center">8月</uni-th>
							<uni-th width="110" align="center">9月</uni-th>
							<uni-th width="110" align="center">10月</uni-th>
							<uni-th width="110" align="center">11月</uni-th>
							<uni-th width="110" align="center">12月</uni-th>
							<uni-th width="110" align="center">总计</uni-th>
						</uni-tr>

						<uni-tr v-for="(item, index) in tableData1" :key="index">
							<uni-td class="fixed">{{ item.year }}</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month1" type="digit"></u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month2" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month3" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month4" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month5" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month6" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month7" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month8" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month9" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month10" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month11" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.month12" type="digit">
								</u--input>
							</uni-td>
							<uni-td>
								<u--input border="surround" v-model="item.all" type="digit">
								</u--input>
							</uni-td>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData2" :key="index">
							<uni-td class="fixed">{{ item.title }}</uni-td>
							<view class="info-input" v-if="index == 0 ||index == 1||index == 2">
								<view class="vox">
									{{item.data || '/'}}
								</view>
							</view>

							<view class="info-input" v-if="index == 3" style="display: flex;">
								<view class="small">
									丰：{{item.watershed_f||'-'}}
								</view>
								<view class="small">
									平：{{item.watershed_p||'-'}}
								</view>
								<view class="small">
									枯：{{item.watershed_k||'-'}}
								</view>
							</view>
							<view class="info-input" v-if="index == 4"
								style="display: flex;justify-content: flex-start;">
								<view class="small">
									丰：{{item.activity_price_f||'-'}}
								</view>
								<view class="small">
									平：{{item.activity_price_p||'-'}}
								</view>
								<view class="small">
									枯：{{item.activity_price_k||'-'}}
								</view>
							</view>

						</uni-tr>
					</uni-table>
					<view class="btnContainer">
						<u-button class="left" text="取消" @click="showPopup=false" size="small"></u-button>
						<u-button class="right" text="确认报价" size="small" @click="confirmSubmit"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import But from "@/components/Button/index.vue"
	import {
		customDetail,
		customAdd,
		quotation,
		updateQuotation,
		quotationDetail
	} from "@/request/homeApi.js";
	export default {
		data() {
			const year = new Date().getFullYear()
			return {
				editForm: {}, // 编辑表单
				showPopup: false, //是否显示弹出框
				remarks: "",
				form: {},
				tableData1: [{
						"year": year - 2,
						"month1": '',
						"month2": '',
						"month3": '',
						"month4": '',
						"month5": '',
						"month6": '',
						"month7": '',
						"month8": '',
						"month9": '',
						"month10": '',
						"month11": '',
						"month12": '',
						"all": ''
					},
					{
						"year": year - 1,
						"month1": '',
						"month2": '',
						"month3": '',
						"month4": '',
						"month5": '',
						"month6": '',
						"month7": '',
						"month8": '',
						"month9": '',
						"month10": '',
						"month11": '',
						"month12": '',
						"all": '',
					},
					{
						"year": year,
						"month1": '',
						"month2": '',
						"month3": '',
						"month4": '',
						"month5": '',
						"month6": '',
						"month7": '',
						"month8": '',
						"month9": '',
						"month10": '',
						"month11": '',
						"month12": '',
						"all": '',
					},
					{
						"year": (year + 1),
						"month1": '',
						"month2": '',
						"month3": '',
						"month4": '',
						"month5": '',
						"month6": '',
						"month7": '',
						"month8": '',
						"month9": '',
						"month10": '',
						"month11": '',
						"month12": '',
						"all": '',
					},
				],
				id: '',
				quotation: '',
				tableData2: [{
						"title": "备注",
						"data": "注：电量换算公式：1000千瓦时（KWh)=1兆瓦时（MWh）",
					}, {
						"title": "报价栏(元/MWh)",
						"data": "平台填写",
						"disabled": true,
					},
					{
						"title": "一口价(元/MWh)",
						"data": "",
						"disabled": true,
					},
					{
						"title": "分水期(元/MWh)",
						"watershed_f": "",
						"watershed_p": "",
						"watershed_k": "",
						"disabled": true,
					},
					{
						"title": "浮动电价(元/MWh)",
						"activity_price_f": "",
						"activity_price_k": "",
						"activity_price_p": "",
						"disabled": true,
					},
				]
			};
		},
		components: {
			But,
		},

		onLoad(e) {
			this.id = e.id
			this.getList(e.id);
		},
		methods: {
			// 报价详情
			getTation() {
				let that = this;
				quotation({
					custom_lists_id: that.id
				}).then(res => {
					if (res.code == 200) {
						that.form = res.data.quotation[0] ? res.data.quotation[0] : {}
						that.tableData2[2].data = that.form.price ? that.form.price : ''
						that.tableData2[3].data = that.form.watershed ? that.form.watershed : ''
						that.tableData2[4].data = that.form.activity_price ? that.form.activity_price : ''
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			},
			handleSubmit() {
				this.showPopup = true
			},
			confirmSubmit() {
				this.tableData1.forEach(item => {
					item.all = ''
				})
				console.log(this.tableData1, 'this.tableData1', this.quotation)
				// return
				if (this.quotation == 2) {
					updateQuotation({
						electricity_json: this.tableData1,
						custom_lists_id: this.id,
						notes: this.remarks,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
						if (res.code == 200) {
							this.showPopup = false
						}
					})
				} else {
					customAdd({
						electricity_json: this.tableData1,
						notes: this.remarks,
						custom_lists_id: this.id,
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
						if (res.code == 200) {
							this.showPopup = false
						}
					})
				}
			},
			countTotal() {
				this.tableData1[0].all += 1
				this.tableData1.forEach((e, i) => {
					let month1 = parseFloat(e.month1 ? e.month1 : 0)
					let month2 = parseFloat(e.month2 ? e.month2 : 0)
					let month3 = parseFloat(e.month3 ? e.month3 : 0)
					let month4 = parseFloat(e.month4 ? e.month4 : 0)
					let month5 = parseFloat(e.month5 ? e.month5 : 0)
					let month6 = parseFloat(e.month6 ? e.month6 : 0)
					let month7 = parseFloat(e.month7 ? e.month7 : 0)
					let month8 = parseFloat(e.month8 ? e.month8 : 0)
					let month9 = parseFloat(e.month9 ? e.month9 : 0)
					let month10 = parseFloat(e.month10 ? e.month10 : 0)
					let month11 = parseFloat(e.month11 ? e.month11 : 0)
					let month12 = parseFloat(e.month12 ? e.month12 : 0)
					this.tableData1[i].all = month1 + month2 + month3 + month4 + month5 + month6 + month7 +
						month8 + month9 + month10 + month11 + month12
				})
				console.log(this.tableData1, 'tableData1dddd')
			},
			getList(id) {
				customDetail({
					id
				}).then(res => {
					if (res.code == 200) {
						this.editForm = res.data
						this.quotation = res.data.quotation
						if (this.quotation == 2) {
							quotationDetail({
								custom_lists_id: this.id
							}).then(res => {
								if (res.code == 200) {
									this.tableData1 = res.data ? JSON.parse(res.data.electricity_json) :
									[],
										// that.$set()
										this.tableData2[2].data = res.data ? res.data.price : ''

									this.tableData2[3].watershed_f = res.data ? res.data.watershed_f : ''
									this.tableData2[3].watershed_p = res.data ? res.data.watershed_p : ''
									this.tableData2[3].watershed_k = res.data ? res.data.watershed_k : ''

									this.tableData2[4].activity_price_f = res.data ? res.data
										.activity_price_f : ''
									this.tableData2[4].activity_price_p = res.data ? res.data
										.activity_price_p : ''
									this.tableData2[4].activity_price_k = res.data ? res.data
										.activity_price_k : ''
									// this.tableData2[4].data = res.data ? res.data.activity_price : ''
									this.$forceUpdate();
								} else {
									uni.showToast({
										title: res.msg,
										duration: 1500,
										icon: 'none',
									})
								}
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.btnContainer {
		display: flex;
		justify-content: space-between;

		/deep/ button {
			margin: 40upx;
		}
	}

	/deep/ .u-input {
		border: none !important;
		border-radius: 0px;
	}

	.info-input {
		width: 892%;
		border-right: 1px #EBEEF5 solid;
		border-bottom: 1px #EBEEF5 solid;
		padding: 20upx 30upx;
		height: 110rpx;

		.small {
			width: 6%;
			align-items: center;
		}

		.vox {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}
	}

	/deep/ .uni-table-tr {
		position: relative;

		.uni-table-td,
		.uni-table-th {
			background-color: white;

			&:first-child {
				position: sticky;
				left: 0;
				top: 0;
				z-index: 99999;
			}
		}

	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.page {
		.box {
			margin: 20rpx 20rpx;

			/deep/ .u-form {
				padding: 0 20rpx 20rpx;

			}

			.image {
				width: 720rpx;
				border-radius: 20rpx;
			}
		}


		.btn {
			position: fixed;
			bottom: 100rpx;
			left: 30rpx;
			right: 30rpx;
		}

		/deep/ .u-button {
			background: #58B99D;
			border-color: transparent;
			color: #fff;

			.left {
				margin-right: 20px;
				background: #ECECEC;
				color: #979797;
			}
		}

		/deep/ .u-form-item__body {
			padding: 28rpx 0;
		}

		/deep/ .u-line {
			border-color: #D9D9D999;
		}


		.line {
			height: 2rpx;
			width: 93%;
			margin: 0 auto;
			background: #D9D9D999;
		}

		// 弹窗样式
		.popup-content {
			height: 80vh;
			overflow-y: auto;

			.porup-header {
				display: flex;
			}
		}
	}
</style>